<!--电子合同-->
<template>
  <a-card
    style="height: 100%; width: 100%; display: flex; flex-direction: column"
    :bodyStyle="{flex: 1,height: 0, padding: '24px'}"
  >
    <template #title>
      <cu-icon class="icon-primary" type="org-hetong" />
      合同执行
    </template>
    <template #extra>
      <a-button
        type="link"
        size="small"
        v-permission="['contractList', 'curd', 'list']"
        @click="$utils.goMainRoute({name: 'contractList',})">更多&nbsp;&gt;</a-button>
    </template>
    <a-spin :spinning="spinning">
      <div class="ele-box">
        <div class="list-item" v-for="(item, index) in list" :key="index">
          <a-tooltip placement="top" :title="item.num">
            <div class="item-num" :style="{color: item.color}">{{item.num}}</div>
          </a-tooltip>
          <div class="list-dec">{{item.title}}</div>
        </div>
      </div>
    </a-spin>
  </a-card>
</template>
<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  onMounted,
  reactive,
  nextTick, toRefs,
} from "vue";
import {Empty, message, Modal, Progress} from "ant-design-vue";
import request from "../../../common/utils/request";
import utils from "@/common/utils/utils";
export default defineComponent({
  name: "eleContract",
  components: {
  },
  setup(props, context) {

    const state = reactive({
      spinning: false,
      list: [
        {
          title: '待处理',
          num: 0,
          color: '#f7b500',
        },
        {
          title: '执行中',
          num: 0,
          color: '#3ac240',
        },
        {
          title: '已退租',
          num: 0,
          color: '#fab584',
        },
        {
          title: '已到期',
          num: 0,
          color: '#f44745',
        },
      ]
    })

    const getData = () => {
      state.spinning = true;
      request.get("/org", "/workbench/contractStatistics").then((res) => {
        state.list.forEach((item, index) => {
          item.num = res[`total${index + 1}`]
        })
        state.spinning = false;
      }).catch((err) => {
        state.spinning = false;
      })
    };

    getData();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-progress-text) {
  color: #666;
}
.ele-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  .list-item {
    display: flex;
    max-width: 25%;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .item-num {
      font-size: 24px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: break-all;
    }
  }
}
.icon-primary {
  color: @primary-color;
  font-size: 18px;
}
:deep(.ant-spin-nested-loading) {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
}
</style>